<template>
	<view class="wrap">
		<uni-list>
			<uni-list-item
				v-for="(item, index) in workApplyList"
				:key="index"
				showArrow
				clickable
				@click="showDetail(item)">
				<template v-slot:header>
					<u-jk-avatar v-if="item.userInfo[0].avatar" :src="item.userInfo[0].avatar" size="80" mode="square" class="header-image"></u-jk-avatar>
					<u-jk-avatar v-else :text="item.empName" size="80" mode="square" class="header-image" bg-color='#36daeb'></u-jk-avatar>
				</template>
				<template v-slot:body>
					<view style="width: 59%;">
						<view class="item-title">
							<view>{{item.empName}}</view>
							<view style="margin-left: 20rpx;">时长：{{item.workDays}}天</view>
						</view>
						<view class="item-content">{{item.reason}}</view>
					</view>
				</template>
				<template v-slot:footer>
					<view style="margin-left: auto;">
						<view class="item-title" style="font-size: 28rpx;">{{item.workTimeStart}}</view>
						<view style="text-align: center;">{{item.status | statusFilter}}</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,			// 申请类型 0:调休 ，1:加班
				workApplyList: [],	// 待审核申请列表
			}
		},
		filters: {
			// 审核状态转文字
			statusFilter(status) {
				switch(status) {
					case 0:
						return '待审核';
					case 1:
						return '已审核';
					case 2:
						return '已失效';
					default:
						return '待审核';
				}
			}
		},
		onLoad(options) {
			this.type = options.type;
			uni.setNavigationBarTitle({
			    title: (this.type === '0' ? '调休' : '加班') + '申请'
			});
			this.getWorkApplyList(this.type);
		},
		methods: {
			/**
			 * 获取需要审核加班/调休申请列表
			 * @param {String} type 0:调休 ，1:加班"
			 */
			getWorkApplyList(type) {
				let that = this;
				uni.showLoading();
				
				this.request('business/work/getWorkApplyList', {
					type: type
				}).then(res => {
					if(res.code === 0) {
						that.workApplyList = res.data;
					} else {
						uni.showModal({
							showCancel: false,
							content: res.msg
						})
					}
				}).catch(err => {
					uni.showModal({
						showCancel: false,
						content: err.message || '请求服务失败',
					})
				}).finally(() => {
					uni.hideLoading();
				})
			},
			
			// 查看详情
			showDetail(item){
				uni.navigateTo({
					url: './detail?ifAuditor=true&applyInfo=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}
	/* #endif */
</style>

<style lang="scss" scoped>
	/* #ifdef H5 */
	.row{
		display: block;
	}	
	/* #endif */
	
	.row{
		/deep/ .u-td{
			flex-direction: row;
		}
	}
	
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	
	.header-image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10px;
		overflow: hidden;
	}
	
	.item-title {
		display: flex;
		font-size: 30rpx;
		color: #757070;
		line-height: 1.5;
	}
	
	.item-content {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
</style>